<template>
	<div class="email_container">
		<div class="main">
			<div class="tab">
				<div :class="{ tab_ac: tab_id == 1 }" @click="changeTab(1)">
					<span class="label_name">
						{{ t('message_center') }}
						<span v-if="myEmail.hasNoRead" class="dot"></span>
					</span>
				</div>
				<div :class="{ tab_ac: tab_id == 2 }" @click="changeTab(2)">
					<span class="label_name">
						{{ t('reward_email') }}
						<span v-if="myEmail.rewardList.length>0" class="dot"></span>
					</span>
				</div>
			</div>
			<swiper
				direction="horizontal"
				:autoplay="false"
				:autoHeight="true"
				:loop="false"
				:disableOnIntercation="false"
				:touchStartPreventDefault="false"
				slidesPerView="auto"
				:space-between="5"
				:centeredSlides="true"
				class="search_page_swiper"
				@swiper="onSwiperInit"
				@slideChange="handleSwiperChange"
				>
				<swiper-slide :key="1">
					<div class="attention mt-10">
						{{ t('7_days') }}
					</div>

					<div class="list_wrap" v-if="myEmail.list.length > 0">
						<div
							class="list_item"
							v-shrink-on-click
							v-for="item in myEmail.list"
							:key="item.email_id"
							@click="viewInfo(item)"
						>
							<div class="left">
								<img :src="'/imgs/email/read_email.png'" alt="" v-if="!isDot(item)" />
								<img :src="'/imgs/email/unread_email.png'" alt="" v-else />

								<div class="wrapper">
									<div class="wrapper-title">
										<span style="color: #c6c4f5">{{ item.title }}</span>
										<div class="time">{{ getTime(item.recv_time) }}</div>
									</div>
									<div :class="['wrapper-content', { has_no_read: isDot(item) }]">{{ item.content }}</div>
								</div>
							</div>
						</div>
					</div>

					<div v-else class="no_data">
						<img v-lazy="'/imgs/email/no_data.png'" :key="'nodata'" alt="" />
						<span>
							{{ t('nomore_data') }}
						</span>
					</div>
					<!-- 一键已读 v-if="tab_id == 1 && myEmail.hasNoRead" -->
					<div @click="allClick" class="submit" v-if="myEmail.hasNoRead">{{ t('one_click_read') }}</div>
				</swiper-slide>
				<swiper-slide :key="2">
					<div class="attention mt-10">
						{{ t('7_days') }}
					</div>

					<div class="list_wrap" v-if="myEmail.rewardList.length > 0">
						<div
							class="list_item"
							v-shrink-on-click
							v-for="item in myEmail.rewardList"
							:key="item.email_id"
							@click="viewInfo(item)"
						>
							<div class="left">
								<img :src="'/imgs/email/read_email.png'" alt="" v-if="!isDot(item)" />
								<img :src="'/imgs/email/unread_email.png'" alt="" v-else />

								<div class="wrapper">
									<div class="wrapper-title">
										<span style="color: #c6c4f5">{{ item.title }}</span>
										<div class="time">{{ getTime(item.recv_time) }}</div>
									</div>
									<div :class="['wrapper-content', { has_no_read: isDot(item) }]">{{ item.content }}</div>
								</div>
							</div>
						</div>
					</div>

					<div v-else class="no_data">
						<img v-lazy="'/imgs/email/no_data.png'" :key="'nodata'" alt="" />
						<span>
							{{ t('nomore_data') }}
						</span>
					</div>
					<!-- 一键领取 -->
					<div @click="allClick2" class="submit" v-if="!received_all">
						{{ t('one_click_claim') }}
					</div>
				</swiper-slide>
			</swiper>
		</div>
		<div></div>
		<Modal v-model:visible="isShow" :title="t('email_title')">
			<div class="popup_body">
				<div>
					<span class="title"> {{ t('email_title') }}</span>
					<div class="content">{{ itemInfo?.title }}</div>
				</div>
				<div class="mt-12">
					<span class="title">{{ t('email_content') }}</span>
					<div class="content h_150" style="overflow-y: auto">
						{{ itemInfo?.content }}
					</div>
				</div>
				<div class="mt-12" v-if="tab_id == 2">
					<span class="title mb-8">{{ t('attachment') }}</span>
					<div class="content email_file">
						<div class="flex_align_center">
							<ImgT src="/imgs/email/dollar.webp" alt="" />
							<span>
								<nut-price
									:price="itemInfo?.attachments[0].award_value"
									size="small"
									style="color: #fff; margin-left: 5px"
									:decimal-digits="0"
									thousands
									:need-symbol="false"
							/></span>
						</div>
						<Btn height="32px" width="99px" class="submit mr-5" v-if="!receive_email_ids.includes(itemInfo?.email_id)" @click="getAward">
							{{ t('vip_collect') }}</Btn
						>
						<span class="mr-5 btn_disabled" v-else> {{ t('received') }}</span>
					</div>
				</div>

				<!-- <div class="submit_btn">
                    <Btn height="44px" width="200px" class="submit" @click="isShow = false">{{ t('confirm') }}</Btn>
                </div> -->
			</div>
		</Modal>
		<Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, defineAsyncComponent, onMounted } from 'vue';
import { User } from '@/store/user';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { NetPacket } from '@/netBase/NetPacket';
import PKwebsocket from '@/lolo/Ws';
import { useI18n } from 'vue-i18n';
import eventBus from '@/lolo/eventBus';
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
const Toast = defineAsyncComponent(() => import('@/components/Toast.vue'));

const { t } = useI18n();
const store = User(pinia);
const { myEmail } = storeToRefs(store);

const isShow = ref(false);
// const router = useRouter();
const tab_id = ref(1);
const itemInfo = ref();
const showToast = ref(false);
const toast_value = ref('');

// 邮件查看详情
const viewInfo = (item: any) => {
	isShow.value = true;
	itemInfo.value = item;
	if (!myEmail.value.email_readed.includes(item.email_id)) {
		const query = NetPacket.req_read_email();
		query.email_id = item.email_id;
		PKwebsocket.instance.send(query, true, {
			callbackName: 'msg_notify_read_email',
			callback: resultRead_email,
		});
	}
};
// 附件领取
const getAward = () => {
	const query = NetPacket.req_get_email_attachments();
	query.email_id = itemInfo.value.email_id;
	PKwebsocket.instance.send(query, true, {
		callbackName: 'msg_notify_get_email_attachments',
		callback: resultAttachments,
	});
};

const getTime = (value: any) => {
	return `${setZero(value.day)}/${setZero(value.month)}/${value.year} ${setZero(value.hour)}:${setZero(value.minute)}:${setZero(value.second)}`;
};

const setZero = (value: any) => {
	return value > 9 ? value : '0' + value;
};

const swiperInstance = ref(null);
const onSwiperInit = (swiper: any) => {
	swiperInstance.value = swiper; // 保存 Swiper 实例
};

const handleSwiperChange = (swiper: any) => {
	tab_id.value = swiper.realIndex + 1;
}

const changeTab = (tabId: number) => {
	tab_id.value = tabId;
	// @ts-ignore
	swiperInstance.value?.slideTo(tabId - 1, 400);
}
// 邮件是否未读
const isDot = (item: any) => {
	console.log(6666666666, myEmail.value);
	if (tab_id.value == 1) {
		return !myEmail.value.email_readed.includes(item.email_id);
	} else {
		return !receive_email_ids.value.includes(item.email_id);
	}
};
//邮箱已读
const resultRead_email = (rs: any) => {
	setTimeout(() => {
		btnLoading1.value = false;
	}, 3000);
	let email_id;
	if (rs.email_id.indexOf('-') > -1) {
		email_id = rs.email_id.slice(1);
	} else {
		email_id = rs.email_id;
	}

	if (!myEmail.value.email_readed.includes(email_id)) {
		myEmail.value.email_readed.push(email_id);
	}
	const sb = new Set(myEmail.value.email_readed);

	// 检查普通邮件是否全部已读
	const allNormalEmailsRead = !myEmail.value.email_id_list.some((x: any) => !sb.has(x));

	// 检查奖励邮件是否全部领取
	const allRewardsReceived = myEmail.value.rewardList.every((email: any) => receive_email_ids.value.includes(email.email_id));

	// 只有当两种邮件都处理完成时，才将hasNoRead设为false
	myEmail.value.hasNoRead = !(allNormalEmailsRead && allRewardsReceived);
};
// 读取全部
const btnLoading1 = ref(false);
const allClick = () => {
	const list = myEmail.value.list;
	if (btnLoading1.value) return;
	btnLoading1.value = true;
	if (list && list.length > 0) {
		for (const item of list) {
			//全部已读
			const query = NetPacket.req_read_email();
			query.email_id = item.email_id;
			PKwebsocket.instance.send(query, true);
		}
	}
};

//通知附件领取成功回执
const received_all = computed(() => {
	return myEmail.value['rewardList'].every((email: any) => {
		return receive_email_ids.value.includes(email.email_id);
	});
});
const receive_email_ids: any = ref([]);
const resultAttachments = (rs: any) => {
	setTimeout(() => {
		btnLoading2.value = false;
	}, 3000);
	if (rs.email_id) {
		receive_email_ids.value.push(rs.email_id);
		toast_value.value = 'bank_success';
		showToast.value = true;

		// 从列表移除
		const list = myEmail.value.rewardList;
		const index = list.findIndex((item: any) => rs.email_id == item.email_id);
		if (index >= 0) {
			list.splice(index, 1);
			User(pinia).setEmailList({
				...myEmail.value,
				rewardList: list,
			});
		}

		// 检查普通邮件是否全部已读
		const normalEmailsRead = new Set(myEmail.value.email_readed);
		const allNormalEmailsRead = !myEmail.value.email_id_list.some((x: any) => !normalEmailsRead.has(x));

		// 检查奖励邮件是否全部领取
		const allRewardsReceived = myEmail.value.rewardList.every((email: any) => receive_email_ids.value.includes(email.email_id));

		// 只有当两种邮件都处理完成时，才将hasNoRead设为false
		myEmail.value.hasNoRead = !(allNormalEmailsRead && allRewardsReceived);
	}
};
// 全部领取
const btnLoading2 = ref(false);
const allClick2 = () => {
	const list = myEmail.value.rewardList;
	if (btnLoading2.value) return;
	btnLoading2.value = true;
	if (list && list.length > 0) {
		for (const item of list) {
			// 一键领取
			if (!receive_email_ids.value.includes(item.email_id)) {
				const query = NetPacket.req_get_email_attachments();
				query.email_id = item.email_id;
				PKwebsocket.instance.send(query, true);
			}
		}
	}
};

onMounted(() => {
	eventBus.on('msg_notify_get_email_attachments', resultAttachments);
	eventBus.on('msg_notify_read_email', resultRead_email);
});
</script>

<style lang="scss" scoped>
:deep(.nut-badge .nut-badge__content--dot) {
	top: 5px !important;
	right: 5px !important;
}

.email_container {
	padding: 0 10px 10px;

	:deep(.swiper-slide) {
		min-height: calc(100 * var(--vh) - 120px);
	}

	.top {
		box-sizing: border-box;

		// width: 99%;
		height: 45px;
		background: radial-gradient(87.04% 93.77% at 50% 13.97%, #4c36b3 0.17%, #3a2786 74.42%, #3c279a 100%);
		box-shadow: 0px 1px 1px 0px #00000063;

		box-shadow: 0px 2px 2px 0px #00000057;

		box-shadow: 0px 5px 3px 0px #00000033;

		box-shadow: 0px 8px 3px 0px #0000000f;

		box-shadow: 0px 4px 4px 0px #00000066;
		border-radius: 12px;
		display: flex;
		align-items: center;
		color: #ffffff;
		position: relative;
		padding-left: 10px;

		img {
			height: 40px;
		}

		span {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

.main {
	// padding: 0 10px;

	.submit {
		background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
		background-size: 100% 100%;
		color: #ffffff;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 60px;
		z-index: 9;
		width: calc(100% - 68px);
		border-radius: 8px;
	}
}

.tab {
	margin-top: 16px;
	// background: url(/imgs/email/nav_bar.webp) center;
	background-size: 100%;
	background-repeat: no-repeat;
	// height: 50px;
	display: flex;
	align-items: center;
	padding: 0 4px;
	height: 44px;

	div {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #c0c2db;
		height: 100%; // 添加高度以充满整个tab区域
		cursor: pointer; // 添加鼠标指针样式
		padding-bottom: 12px;
		.label_name {
			position: relative;
		}
	}

	.tab_ac {
		color: #5b6cff;
		position: relative;

		&::after {
			content: '';
			background: linear-gradient(180deg, #5b6cff 0%, #9e1eff 100%);
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			border-radius: 2px;
		}
	}
	.dot {
		position: absolute;
		top: 0px;
		right: -6px;
		width: 6px;
		height: 6px;
		background-color: #fe4a5e;
		border-radius: 50%;
		animation: refresh 2s linear infinite;
	}

	@keyframes refresh {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.3;
		}

		100% {
			opacity: 1;
		}
	}
}

.attention {
	color: #ff5252;
	font-size: 12px;
	text-align: center;
	margin-top: 10px;
}

.list_item {
	box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
	background: #131232;
	border-radius: 8px;
	// background: url(/imgs/email/list_bg.webp) center;
	// background-repeat: no-repeat;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #ffffff;
	padding: 11px 10px;
	margin-top: 10px;
	font-size: 12px;
	height: 100%;

	.close {
		flex-shrink: 0;
	}

	.left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 8px;
		width: 100%;

		.wrapper {
			flex: 1;

			.wrapper-title {
				display: flex;
				align-items: center;
				span {
					display: block;
					flex: 1;
				}
				// justify-content: space-between;

				.time {
					width: 120px;
					color: #504f6f;
				}
			}
		}

		img {
			width: 32px;
			height: 32px;
		}
	}

	.wrapper-content {
		margin-top: 8px;
		color: #504f6f;
		display: -webkit-box;
		overflow: hidden;

		-webkit-line-clamp: 4; /*第几行裁剪*/

		-webkit-box-orient: vertical;
	}
	.has_no_read {
		color: #ffffff;
	}

	.time {
		align-self: self-start;
		color: #504f6f;
	}
}

.no_data {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-top: 24px;
	font-size: 14px;
	color: #fff;

	img {
		width: 88px;
		height: 88px;
		margin-bottom: 8px;
	}
}

.popup_body {
	padding: 15px;
}

.title {
	color: #c0c2db;
	font-size: 12px;
	margin-bottom: 8px;
	display: inline-block;
}

.content {
	padding-left: 15px;
	height: 48px;
	display: flex;
	color: #ffffff;
	align-items: center;
	border-radius: 8px;
	background: #1d1c3c;
	box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
}

.email_file {
	display: flex;
	justify-content: space-between;

	img {
		height: 20px;
		width: 20px;
	}
}

.h_150 {
	min-height: 150px;
	padding: 15px;
	align-items: flex-start;
}

.submit_btn {
	display: flex;
	justify-content: center;
	margin: 30px;
}

.flex_align_center {
	display: flex;
	align-items: center;
}

.mr-5 {
	margin-right: 5px;
}

.btn_disabled {
	background: #7f7a94;
	width: 88px;
	height: 36px;
	color: #afb6bd;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list_wrap {
	max-height: calc(100vh - 250px);
	overflow: auto;
}
</style>
